<template>
<div>
  <div class="user_myprofile user_info_page">
    <div class="togglebtn clearfix" id="js_tab_ul">
      <span class="fl">
        <img width="25px" height="25px"  src="../../static/images/1122321.jpg"></img>
      </span>
      <p class="fl">我的资料<i class="el-icon-edit"></i> </p>
    </div>
    <div>
      <!-- 用户头像-->
      <el-form :inline="true" style="margin-top: -90px" class="demo-form-inline">
          <img :src="user.pic" width="100" height="80" alt="">
        </el-form-item>
        <el-form-item>
         <span style="color: #262626;font-size: 20px">{{user.loginName}}</span>
        </el-form-item>
      <!-- 用户账号信息-->
      </el-form>
    <div class="myprofile_main clearfix data_cont white_bg" id="js_info_div">
        <span>账号完成度</span><el-progress :percentage="70"></el-progress>
      <el-button type="primary" icon="el-icon-edit"></el-button>
      </div>
      <el-collapse v-model="activeNames" >
        <el-collapse-item title="用户信息修改" name="1">
      <div style="margin: 40px;">
        <el-form ref="form" :model="user" label-width="80px">
          <el-form-item label="QQ绑定">
            <el-input v-model="user.qq"></el-input>
          </el-form-item>
          <el-form-item label="手机绑定">
            <el-input v-model="user.phone"></el-input>
          </el-form-item>
          <el-form-item label="邮箱绑定">
            <el-input v-model="user.email" readonly></el-input>
          </el-form-item>
          <el-form-item label="家庭住址">
            <el-input v-model="user.address"></el-input>
          </el-form-item>
          <el-form-item label="头像">
            <el-upload
              class="avatar-uploader"
              action="userapi/qflive-user/user/uploadPic"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
              <img v-if="user.pic" name="file" :src="user.pic" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>

          <el-button type="primary" plain @click="updateUser">提交</el-button>
        </el-form>
      </div>
        </el-collapse-item>
        <el-collapse-item title="我关注的主播" name="2">

        </el-collapse-item>
        <el-collapse-item title="其他等" name="2">

        </el-collapse-item>
      </el-collapse>
      <!-- 第三方帐号绑定 start -->

     </div>
    </div>
</div>
</template>

<script>
  import axios from 'axios'
    export default {
        name: "",
      data(){
          return{
              user:{
                pic:'',
                loginName:'',
                qq:''
              },
            formInline: {
              user: '',
              region: ''
            },
            activeNames: ['1']
          }
      },
      methods: {
        handleAvatarSuccess(res, file) {
          console.log(res)
          this.user.pic = res;
        },
        beforeAvatarUpload(file) {
          const isJPG = file.type === 'image/jpeg';
          const isLt2M = file.size / 1024 / 1024 < 2;

          if (!isJPG) {
            this.$message.error('上传头像图片只能是 JPG 格式!');
          }
          if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 2MB!');
          }
          return isJPG && isLt2M;
        },
        updateUser:function () {
          axios.post("userapi/qflive-user/user/updateUser",this.user).then(res => {
            console.log(res.data)
            if (res.data.success) {
              this.user = res.data.queryResult.object
              const h = this.$createElement;

              this.$notify({
                title: '修改成功',
                message: h('i', { style: 'color: teal'}, '用户数据修改成功')
              });
            }
            if (res.data.code == "11111"||res.data.code=="99999") {
              const h = this.$createElement;

              this.$notify({
                title: '修改失败',
                message: h('i', { style: 'color: teal'}, '用户数据修改失败')
              });
            }
          })
        }
      },
      mounted() {
        axios.post("userapi/qflive-user/user/findUserByToken").then(res => {
          console.log(res.data)
          if (res.data.success) {
            this.user = res.data.queryResult.object
          }
          if (res.data.code == "10006") {
            this.$router.push("/")
          }
        })

      }
    }
</script>

<style scoped>
  .togglebtn {
    margin-bottom: 118px;
    width: 100%;
    background: #f5f5f5;
  }
  .user_myprofile .togglebtn span {
    display: block;
    float: left;
    margin: 10px;
    height: 20px;
    width: 20px;
    background-image: url(../../static/images/1122321.jpg );
    margin-left: 20px;
  }
  .togglebtn p {
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    margin-left: 10px;
    color: #555555;
  }
  .u_mainbody .user_info_page .myprofile_main {
    padding-top: 0;
    margin-top: 0;
  }
  .white_bg {
    background: #fff;
  }
  .myprofile_main {
    position: relative;
    background: #f5f5f5;
  }
  .myprofile_main {
    position: relative;
    background: #fff;
    padding-bottom: 35px;
  }
  .myprofile_main {
    padding: 10px;
    background: #f5f5f5;
    margin-bottom: 35px;
  }
  .clearfix {
    display: block;
    min-height: 1%;
  }
  html, body, div, p, ul, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, form, input, select, button, textarea, iframe, table, th, td {
    margin: 0;
    padding: 0;
  }
  user agent stylesheet
  div {
    display: block;
  }
  .u_mainbody {
    width: 812px;
    float: left;
    padding-left: 20px;
    min-height: 700px;
    background: #fff;
    color: #737373;
    position: relative;
  }
  body {
    background: none repeat scroll 0 0 #f7f7f7;
    color: #333333;
    line-height: 1.2;
    font: 12px/1.5 "微软雅黑", Helvetica, Arial, sans-serif;
    letter-spacing: normal !important;
  }
  body, input, select, button, textarea {
    font-size: 12px;
    font-family: "微软雅黑";
  }
  user agent stylesheet
  html {
    color: -internal-root-color;
  }
  .u_mainbody .userinfo .uinfo_left .utx {
    height: 120px;
    width: 120px;
    margin-right: 10px;
    position: relative;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
